window.addEventListener('load', function() {
    //  {
    /* <div class="tu">
                    <a href="#" class="mainfoucs_lf"></a>
                    <a href="#" class="mainfoucs_re"></a>
                    <ul>
                        <li><img src="./upload/images/轮播图 (1).jpg" alt="" srcset=""></li>
                        <li><img src="./upload/images/轮播图 (2).jpg" alt="" srcset=""></li>
                        <li><img src="./upload/images/轮播图 (3).jpg" alt="" srcset=""></li>
                        <li><img src="./upload/images/轮播图 (4).png" alt="" srcset=""></li>
                        <li><img src="./upload/images/轮播图 (5).png" alt="" srcset=""></li>
                    </ul> */
    // }

    // var mainf1 = this.document.querySelector('.mainf1');
    // // var tu = mainf1.querySelector('.tu');
    // var mainfoucs_lf = tu.querySelector('.mainfoucs_lf');
    // var mainfoucs_re = tu.querySelector('.mainfoucs_re');
    // var ul = tu.querySelector('ul');
    // var li = ul.querySelectorAll('li');
    // var cycle = tu.querySelector('.cycle');
    //鼠标经过tu盒子  mainfoucs_lf显示   离开不显示
    // MouseEvent
    // tu.addEventListener('mouseenter', function() {
    //     mainfoucs_lf.style.display = 'block';
    //     mainfoucs_re.style.display = 'block';
    // });
    // tu.addEventListener('mouseleave', function() {
    //     mainfoucs_lf.style.display = 'none';
    //     mainfoucs_re.style.display = 'none';
    // });
    //生成下面的小圆点  根据li的个数

    // for (var i = 0; i < li.length; i++) {
    //     var cycle11 = this.document.createElement('div');
    //     cycle11.className = 'cycle11';
    //     cycle.appendChild(cycle11);
    // }
    //li.onmouseover 切换到相应的图片  class加上类名    tu.ofsetWIDTH   UL.OFFSETLEFT
    // var cycle11 = cycle.querySelectorAll('.cycle11');
    // ul.style.left = '-697px';
    // console.log(ul.offsetLeft);
    // console.log(cycle11);
    // for (var i = 0; i < cycle11.length; i++) {
    //     cycle11[i].addEventListener('mouseover', function() {
    //         console.log(i);
    //         ul.style.left = '-697px';
    //          console.log(tu.offsetWidth);
    //         console.log(ul.offsetLeft);
    //         this.className = 'cycle11hover';
    //     });
    // }
    // ------------------------------------------------------
    var mainf1 = this.document.querySelector('.mainf1');

    var mainfoucs_lf = mainf1.querySelector('.mainfoucs_lf');
    var mainfoucs_re = mainf1.querySelector('.mainfoucs_re');
    var ul = mainf1.querySelector('ul');
    var li = ul.querySelectorAll('li');
    var cycle = mainf1.querySelector('.cycle');
    //鼠标经过tu盒子  mainfoucs_lf显示   离开不显示

    mainf1.addEventListener('mouseenter', function() {
        mainfoucs_lf.style.display = 'block';
        mainfoucs_re.style.display = 'block';
        console.log(1111111111111);
    });
    mainf1.addEventListener('mouseleave', function() {
        mainfoucs_lf.style.display = 'none';
        mainfoucs_re.style.display = 'none';
    });
    //生成下面的小圆点  根据li的个数

    for (var i = 0; i < li.length; i++) {
        var cycle11 = this.document.createElement('div');

        cycle11.setAttribute('index', i);
        cycle11.className = 'cycle11';
        cycle.appendChild(cycle11);
        // console.log(cycle11.getAttribute('index'));
    }

    //li.onmouseover 切换到相应的图片  class加上类名    tu.ofsetWIDTH   UL.OFFSETLEFT
    var cycle11 = cycle.querySelectorAll('.cycle11');
    //最后一张深克隆第一章
    var img1 = ul.children[0].cloneNode(true);
    ul.appendChild(img1);
    for (var i = 0; i < cycle11.length; i++) {
        cycle11[i].addEventListener('mouseover', function() {
            //排他思想
            for (var i = 0; i < cycle11.length; i++) {
                cycle11[i].className = 'cycle11';
            }
            var index = this.getAttribute('index');
            ul.style.left = '-' + mainf1.offsetWidth * index + 'px';
            this.className = 'cycle11hover';

        });
    }
    cycle11[0].className = 'cycle11hover';
    //点击左右 mainfoucs_re按钮图片切换  下面的小圆点切换   图片切换的原理当前的ul的left值减去 mainf1.offsetwideh
    var num = 1;
    mainfoucs_re.addEventListener('click', function() {
        // ul.style.left = ul.offsetLeft - mainf1.offsetWidth + 'px';
        var juli = '-' + num * mainf1.offsetWidth + 'px';
        ul.style.left = juli;
        animate(ul, juli)
        num++;
        if (num == 6) {
            ul.style.left = 0;
            num = 1;
        }
        for (var i = 0; i < cycle11.length; i++) {
            cycle11[i].className = 'cycle11';
        }
        cycle11[num - 1].className = 'cycle11hover';

    });

    // var img2 = ul.children[ul.children.length - 2].cloneNode(true);
    // ul.insertBefore(img2, ul.children[0]);

    // ----------------
    var numleft = li.length - 1;
    mainfoucs_lf.addEventListener('click', function() {

        ul.style.left = '-' + numleft * mainf1.offsetWidth + 'px';

        if (numleft == 0) {

            ul.style.left = '-' + li.length * mainf1.offsetWidth + 'px';
            numleft = li.length;

        }
        numleft--;
        console.log(numleft);

        for (var i = 0; i < cycle11.length; i++) {
            cycle11[i].className = 'cycle11';
        }
        if (numleft == 0) {
            cycle11[0].className = 'cycle11hover';

        }

        cycle11[numleft + 1].className = 'cycle11hover';

    });

});